<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>隐患台账</title>
    <link rel="stylesheet" href="../../content/default/css/common1.css">
    <link rel="stylesheet" href="../../content/default/css/swiper.min.css">
    <link rel="stylesheet" href="../../content/default/css/hiddenTz.css">
    <link rel="stylesheet" href="../../content/common/layui/css/layui.css">
    <link rel="stylesheet" href="../../content/default/css/yhTcc.css">
</head>

<body>
<div class="container">
    <div class="mainDiv">
        <!--左侧导航-->
        <!--右侧主体内容-->
        <div class="scroll_main clearfix">
            <ul class="top_nav clearfix">
                <li>可选页面</li>
                <li class="active">隐患台账</li>
                <li>可选页面</li>
            </ul>
            <div class="mainContentv clearfix">
                <div class="tree-nav fl">
                    <div class="search">
                        <input type="text">
                    </div>
                    <div id="tree"></div>
                </div>
                <div class="pannel_main fl">
                    <div class="tips">
                        <ul class="nav1 clearfix">
                            <li><img src="../../content/default/image/all.png">全部</li>
                            <li><img src="../../content/default/image/dianli.png">电力板块</li>
                            <li><img src="../../content/default/image/mt.png">煤炭板块</li>
                            <li class="active"><img src="../../content/default/image/zz.png">装备制造</li>
                            <li><img src="../../content/default/image/jz.png">工程建设</li>
                        </ul>
                    </div>
                    <div class="topCentent">
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">隐患状态：</label>
                            <ul class="yearsUl">
                                <li class="active">全部</li>
                                <li>未整改</li>
                                <li>逾期未整改</li>
                                <li>延期整改</li>
                                <li>即将到期未整改</li>
                                <li>已闭环</li>
                                <li>挂牌督办</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">流程状态：</label>
                            <ul class="yearsUl clearfix">
                                <li class="active">全部</li>
                                <li>隐患登记</li>
                                <li>隐患完善</li>
                                <li>隐患评估</li>
                                <li>隐患整改</li>
                                <li>隐患验收</li>
                                <li>整改效果评估</li>
                                <li>整改结束</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">隐患类别：</label>
                            <ul class="yearsUl">
                                <li class="active">全部</li>
                                <li>人身安全隐患</li>
                                <li>电力安全事故隐患</li>
                                <li>设备设施事故隐患</li>
                                <li>大坝安全隐患</li>
                                <li>安全管理隐患</li>
                                <li>其他事故隐患</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">隐患级别：</label>
                            <ul class="yearsUl">
                                <li class="active">全部</li>
                                <li>一般隐患</li>
                                <li>Ⅰ级重大隐患</li>
                                <li>Ⅱ级重大隐患</li>
                            </ul>
                        </div>
                        <div class="pannel_maintop">
                            <label class="yearsLab" for="">选择日期：</label>
                            <div class="layui-form-item">
                                <div style="float: left;height: 50px;">
                                    <div class="layui-input-block" style="margin-left: 0">
                                        <input lay-verify="required" placeholder="" id="test1" class="layui-input">
                                        <img src="../../content/default/image/rili.png" class="timeIcon">
                                    </div>
                                </div>
                                <div style="float: right;height: 50px;">
                                    <label class="layui-form-label" style="width: 30px">~</label>
                                    <div class="layui-input-block" style="margin-left: 40px">
                                        <input lay-verify="required" placeholder="" id="test2" class="layui-input">
                                        <img src="../../content/default/image/rili.png" class="timeIcon">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="selectedDiv">
                            <span class="chosen" style="float: left">已选条件：</span>
                            <ul class="nav2 clearfix fl">
                                <li>集团层级</li>
                                <li>火电</li>
                            </ul>
                            <span class="emptyAll">清空</span>
                        </div>
                        <i class="downward"></i>
                    </div>
                    <div class="pannel_maincontent">
                        <div class="operator_bar">
                            <div class="btnGroup" style="float: left;">
                                <button class="btn dengji btnHover">新增</button>
                                <button class="btn btnHover">导入</button>
                                <button class="btn btnHover">督办记录</button>
                                <button class="doMore btn" style="width: 55px;">···</button>
                                <ul class="moreList">
                                    <li>批量删除</li>
                                    <li>导出</li>
                                    <li>操作1</li>
                                </ul>
                            </div>
                            <div class="switch_container">
                                <input placeholder="请输入关键词" class="layui-input">
                                <img src="../../content/default/image/find.png" class="timeIcon1">
                            </div>
                        </div>
                        <table class="layui-hide" lay-skin="line" data-mobile-responsive="false" id="demo"></table>
                        <div id="demo4" style="text-align: center"></div>
                    </div>
                </div>
            </div>
            <div class="hoverDiv">
                <div class="telescopic"></div>
                <div class="pannel_aside">
                    <div class="searchDiv">
                        <h2>隐患数量统计</h2>
                    </div>
                    <div class="echartsDiv">
                        <div class="echarts1"></div>
                    </div>
                    <div class="staticWrap">
                        <table class="checkTable">
                            <tr>
                                <th width="20%">单位名称</th>
                                <th width="20%">登记隐患数</th>
                                <th width="20%">已整改隐患数</th>
                                <th width="20%">未整改隐患数</th>
                                <th width="20%">整改率</th>
                            </tr>
                            <tr>
                                <td>中国华电集团中国华电集...</td>
                                <td><a>16</a></td>
                                <td><a>16</a></td>
                                <td><a>16</a></td>
                                <td>68.6%</td>
                            </tr>
                            <tr>
                                <td>杭州华电半山发电有限公司</td>
                                <td><a>16</a></td>
                                <td><a>16</a></td>
                                <td><a>16</a></td>
                                <td>68.6%</td>
                            </tr>
                            <tr>
                                <td>杭州华电下沙热电有限公司</td>
                                <td><a>18</a></td>
                                <td><a>0</a></td>
                                <td><a>18</a></td>
                                <td>100%</td>
                            </tr>
                            <tr>
                                <td>中国华电集团福建分公司</td>
                                <td><a>0</a></td>
                                <td><a>11</a></td>
                                <td><a>11</a></td>
                                <td>44.6%</td>
                            </tr>
                            <tr>
                                <td>中国华电集团中国华电集...</td>
                                <td><a>5</a></td>
                                <td><a>5</a></td>
                                <td><a>5</a></td>
                                <td>76.5%</td>
                            </tr>
                            <tr>
                                <td>杭州华电半山发电有限公司</td>
                                <td><a>0</a></td>
                                <td><a>5</a></td>
                                <td><a>5</a></td>
                                <td>85.2%</td>
                            </tr>
                            <tr>
                                <td>杭州华电下沙热电有限公司</td>
                                <td><a>3</a></td>
                                <td><a>0</a></td>
                                <td><a>3</a></td>
                                <td>76.4%</td>
                            </tr>
                            <tr>
                                <td>中国华电集团福建分公司</td>
                                <td><a>1</a></td>
                                <td><a>1</a></td>
                                <td><a>1</a></td>
                                <td>88.9%</td>
                            </tr>
            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--隐患登记弹出层-->
<div class="djBox" id="djBox">
    <form class="layui-form" action="">
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">隐患编码:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="20200314001" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">隐患名称:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="1B引风机出口挡板连杆脱开" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">隐患类别:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="设备设施事故隐患" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">隐患地点:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="1B引风机" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排查人:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="王鹏辉" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">整改单位:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="华电句容发电有限公司" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">隐患级别:</label>
                    <div class="layui-input-block">
                        <select name="interest" lay-filter="aihao">
                            <option value=""></option>
                            <option value="0" selected="">一般隐患</option>
                            <option value="1">重大隐患</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">隐患区域:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="1B引风机" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排查单位:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" lay-verify="title" autocomplete="off" value="中国华电集团有限公司安全环保部" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排查时间:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date1" id="date1" class="layui-input" value="2020-02-25">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">整改截至日期:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="date2" id="date2" class="layui-input" value="2020-03-25">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item wid100">
                <label class="layui-form-label">隐患描述:</label>
                <div class="layui-input-block">
                  <input  type="text" name="title" readonly lay-verify="title" autocomplete="off" value="张强、李倩、王肖、李玉兰、李玉龙、李玉林、王石、周茜、薛阳" class="layui-input readonly">
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item wid100">
                <label class="layui-form-label">隐患图片:</label>
                <div class="layui-input-block clearfix">
                    <div class="upload">
                       <img src="../../content/default/image/add_img.png">
                       <input type="file"> 
                    </div>
                    <ul class="img_list clearfix">
                        <li>
                            <img src="../../content/default/image/yh_img.png">
                            <div class="img_delete">删除</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </form>
</div>
</body>
<script src="../../content/common/jquery-3.3.1.min.js"></script>
<script src="../../content/common/echarts.min.js"></script>
<script src="../../content/common/nicescroll.min.js"></script>
<script src="../../content/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script>
  layui.use('tree', function () {
        var tree = layui.tree;

        //渲染
        var inst1 = tree.render({
            elem: '#tree' //绑定元素
                ,
            data: [{
                title: '中国华电集团有限公司' //一级菜单
                ,
                spread: true,
                children: [{
                    title: '贵州乌江水电开发有限公司' //二级菜单
                        , 
                },
                {
                    title: '华电能源股份有限公司' //一级菜单
                        , 
                },
                {
                    title: '华电国际电力股份有限公司' //一级菜单
                        ,
                },
                {
                    title: '华电置业有限公司' //一级菜单
                        ,
                }]
            }]
        });
    });
    $('.dengji').click(function(){
        layer.open({
            title:'隐患登记',
            type:1,
            btn:['保存','提交','取消'],
            area:['900px','500px'],
            content:$('#djBox')
        })
    })
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
        var element = layui.element;
        var laydate = layui.laydate //日期
            , laypage = layui.laypage //分页
            , layer = layui.layer //弹层
            , table = layui.table //表格
            , carousel = layui.carousel //轮播
            , upload = layui.upload //上传
            , element = layui.element //元素操作
            , slider = layui.slider //滑块

        var laydate = layui.laydate;
        laydate.render({
            elem: "#test1",
            type: "datetime",
            format: "yyyy-MM-dd"
        });
        laydate.render({
            elem: "#test2",
            type: "datetime",
            format: "yyyy-MM-dd"
        });
        //日期
        laydate.render({
            elem: '#date1',
            trigger: 'click'
        });
        laydate.render({
            elem: '#date2',
            trigger: 'click'
        });
        //监听Tab切换

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            , data: [
                {
                    "label": "<img class='hiddenImg' src='../../content/default/image/taiz_img1.jpg'>",
                    "name": "<img src=\"../../content/default/image/dianli.png\" class='contentImg'>华电句容发电有限公司",
                    "time1": "<span class='bigHidden'>重大隐患</span>",
                    "time2": "设备设施事故隐患",
                    "time3": "锅炉给煤间内多处一次粉管吊架脱...",
                    "time4": "<span class='lcBtn'>隐患登记</span>",
                    "time5": "2019-09-16",
                    "time7": "2019-10-16",
                    "time6": "<button class='btn btnHover'>督办</button><button  class='deleBtn1 btn'>删除</button>",
                },
                {
                    "label": "<img class='hiddenImg' src='../../content/default/image/taiz_img2.jpg'>",
                    "name": "<img src=\"../../content/default/image/dianli.png\" class='contentImg'>华电句容发电有限公司",
                    "time1": "<span>一般隐患</span>",
                    "time2": "设备设施事故隐患",
                    "time3": "锅炉给煤间内多处一次粉管吊架脱...",
                    "time4": "<span class='lcBtn'>隐患登记</span>",
                    "time5": "2019-09-16",
                    "time7": "2019-10-16",
                    "time6": "<button class='btn btnHover'>督办</button><button  class='deleBtn1 btn'>删除</button>",
                }
            ]
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left', width: '3%'},
                {field: 'label', title: '隐患图片', width: '12%'}
                , {field: 'name', title: '整改单位', width: '10%'}
                , {field: 'time1', title: '隐患级别', width: '8%'}
                , {field: 'time2', title: '隐患类别', width: '8%'}
                , {field: 'time3', title: '隐患名称', width: '10%'}
                , {field: 'time4', title: '流程状态', width: '10%'}
                , {field: 'time5', title: '排查时间', width: '9%'}
                , {field: 'time7', title: '截止整改时间', width: '10%'}
                , {field: 'time6', title: '操作', width: '20%'}
            ]],
            skin: "line"
            , done: function (res, curr, count) {
                layui.use(['jquery'], function () {
                    var $ = jQuery = layui.$;
                    // 你可以在下面的 js 代码中使用你熟悉的 $, jQuery
                    $("tbody>tr").each(function (i, e) {
                        $(this).click(function () {
                            $(this).children().children().find(".layui-bg-red").hide()
                        })
                    })
                })
                $('.lcBtn').click(function(){
                    layer.open({
                        title:'隐患详情',
                        type:2,
                        shadeClose: true,
                        // btn:['保存','提交','取消'],
                        area:['1200px','780px'],
                        content:'隐患流程.html'
                    })
                })
            }
        });
        laypage.render({
            elem: 'demo4'
            , count: 100
            , theme: '#206dee'
            , first: '首页'
            , last: '尾页'
        });
    });

    $(function () {
        //统计展开和收缩
        $('.telescopic').click(function () {
            $(this).toggleClass('fold').siblings().toggleClass('fold')
            $("pannel_aside").toggleClass('fold').siblings().toggleClass('fold')
            $('#dg').resize()
        })
        $(".downward").click(function(){
            $(this).toggleClass('fold').siblings().toggleClass('fold')
            $("pannel_maintop").toggleClass('fold').siblings().toggleClass('fold')
            $('.selectedDiv').toggle()
        })

        //年份切换
        $('.yearsUl li').click(function () {
            $(this).addClass('active').siblings().removeClass('active')
        })
        $('.doMore').click(function(){
            $('.moreList').toggle()
        })
        $('#tree').niceScroll({
            autohidemode: false,
            cursorcolor:'#c9c9c9'
        });
        $('.nav1 li').click(function(){
            $(this).addClass('active').siblings().removeClass('active')
        })

       
        echarts1()

        function echarts1() {
            var data3 = [50, 140, 115, 80, 30, 40]
            var option3 = {
                tooltip: {},
                grid: {
                    left: '0',
                    right: '10',
                    bottom: '10%',
                    top: '30%',
                    containLabel: true
                },
                legend: {
                    orient: 'horizontal', // 'vertical'
                    x: 'center', // 'center' | 'left' | {number},
                    y: 'top', // 'center' | 'bottom' | {number},
                    icon: "circle",   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
                    data: ['未整改隐患数', '已整改隐患数', '登记隐患数']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['北京', '山东淄博', '唐山亿山', '北京新机', '北京大兴', '北京洺悦'],
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#5e5e5e',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false,
                        }
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            textStyle: {
                                color: '#5e5e5e',
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#e4e4e4',
                                type: 'dashed'
                            },

                        }
                    }
                ],
                dataZoom: [{
                    start: 0,
                    end: 100 - 500 / 20,
                    show: true,
                    type: 'slider',
                    xAxisIndex: [0],
                    handleSize: 0,
                    height: 8,
                    left: '0',
                    right: '0',
                    bottom: 0,
                    fillerColor: '#999999',
                    borderRadius: 4,
                    borderColor: '#f4f4f4',
                    backgroundColor: '#f4f4f4',
                    showDataShadow: false,
                    realtime: false,
                    filterMode: 'filter',
                    textStyle: false
                }],
                series: [
                    
                    {
                        name: '未整改隐患数',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [50, 32, 1, 54, 90, 30, 10],
                        itemStyle: {
                            normal: {
                                color: '#ff688d'
                            }
                        }
                    }, {
                        name: '已整改隐患数',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [50, 32, 1, 54, 30, 30, 20],
                        itemStyle: {
                            normal: {
                                color: '#51b3ff'
                            }
                        }
                    }, {
                        name: '登记隐患数',
                        type: 'bar',
                        stack: '广告',
                        barWidth: 20,
                        data: [50, 32, 21, 14, 10, 30, 10],
                        itemStyle: {
                            normal: {
                                color: '#958bff'
                            }
                        }
                    }]
            };
            var chart3 = echarts.init(document.querySelector('.echarts1'));
            chart3.setOption(option3);
            $(window).resize(function () {
                chart3.resize()
            })
        }

    })


</script>

</html>